<template>
  <a-modal title="选择意向客户" :width="1000" destroy-on-close :visible="visible" centered
           @cancel="closeModal" @ok="commitSelect">
    <a-row :gutter="12">
      <a-col span="4">
        <a-input placeholder="请输入客户名称" v-model:value="modelRef.name"/>
      </a-col>
      <a-col span="4">
        <a-input placeholder="请输入客户号码" v-model:value="modelRef.tel"/>
      </a-col>
      <a-col span="4">
        <a-select
            style="width: 100%"
            :allowClear="true"
            placeholder="请选择行业"
            v-model:value="modelRef.industry"
            :options="industryList"
        />
      </a-col>
      <a-col span="4">
        <a-select
            style="width: 100%"
            :allowClear="true"
            placeholder="请选择意向项目"
            v-model:value="modelRef.village_id"
            :options="villageList"
        />
      </a-col>
      <a-col span="4">
        <a-select
            style="width: 100%"
            placeholder="请选择客户状态"
            :allowClear="true"
            v-model:value="modelRef.status"
            :options="customerStatusOptions"
        >
        </a-select>
      </a-col>
      <a-col span="4">
        <a-space>
          <a-button type="default" @click="reset">重置</a-button>
          <a-button type="primary" @click="toSearch">搜索</a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-table :columns="columns" :data-source="tableList" :loading="loading"
             style="max-height: 800px;margin-top: 10px"
             :bordered="false"
             rowKey="id"
             @change="handleTableChange"
             :rowClassName="setRowClassName"
             :custom-row="customRow">

    </a-table>
  </a-modal>
</template>

<script>
import {reactive, watch, toRefs, ref, computed} from 'vue'
import request from '@/common/utils/request'
import {message} from 'ant-design-vue'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const state = reactive({
      tableList: [],
      loading: false,
      selectedRowKeys: [],
      selectCustomer: undefined,
      customerStatusOptions: [],
      villageList: [],
      industryList: [],
    })
    const modelRef = reactive({
      name: "",
      tel: "",
      village_id: undefined,
      status: undefined,
      industry: undefined,
    })
    const page = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: pageSize.value,
      showSizeChanger: true,
    }))


    const getCustomerList = () => {
      state.loading = true
      const params = {
        page: page.value,
        pageSize: pageSize.value
      }
      for (const key in modelRef) {
        params[key] = modelRef[key]
      }
      request.post("/org", "/business/customer/myCustomerList", params).then(res => {
        state.loading = false
        console.log(res)
        state.selectCustomer = undefined
        state.tableList = res.list
        total.value = res.total

      })
    }
    const getVillageList = () => {
      request
          .get("/org", "/build/villageAndBuildList/v2", {
            checked: 1,
          })
          .then((res) => {
            let vList = [];
            res.villageList.forEach((item) => {
              vList.push({
                label: item.name,
                value: item.id,
              });
            });
            state.villageList = vList;
          });
    };

    const getIndustryList = () => {
      let list = [];
      request.get("/org", "/manage/taglib/industry/all").then((res) => {
        res.list.forEach((item) => {
          if (item.status == 1) {
            list.push({
              value: item.id,
              label: item.name,
            });
          }
        });
        state.industryList = list;
      });
    };

    const getStatus = () => {
      request.get("/org", "/business/customer/statusList", {}).then((res) => {
        state.customerStatusOptions = res.list.map((item) => ({
          value: item.status,
          label: item.name,
          ...item,
        }));
      });
    };

    const init = () => {
      getCustomerList()
      getStatus()
      getVillageList()
      getIndustryList()
    }

    watch(() => props.visible, (value) => {
      if (value) {
        init()
      } else {
        console.log('11')
      }
    })
    const selectRow = (record) => {
      console.log(record, "11111")
      state.selectCustomer = record
    };
    // const rowSelection = computed(() => {
    //   return {
    //     selectedRowKeys: state.selectedRowKeys,
    //     onChange: (selectedRowKeys) => {
    //       state.selectedRowKeys = selectedRowKeys;
    //
    //       console.log(state.selectedRowKeys, "11111")
    //     },
    //   };
    // });
    const customRow = (record) => {

      console.log(state.selectCustomer, "333333")
      console.log(record, "3333332")
      return {
        onClick: () => {
          selectRow(record);
        },
      };
    };

    const setRowClassName = (record) => {
      console.log(state.selectCustomer, "xxxx")
      console.log(record, "xxxx")
      if (record == state.selectCustomer) {
        return "bg-select"
      }
      return "bg-white"

    }

    const toSearch = () => {
      page.value = 1;
      getCustomerList()
    }

    const reset = () => {
      page.value = 1;
      for (const key in modelRef) {
        if (key == "name" || key == "tel") {
          modelRef[key] = ""
        } else {
          modelRef[key] = undefined
        }
      }
      getCustomerList()
    }


    const handleTableChange = (pager) => {
      page.value = pager.current;
      pageSize.value = pager.pageSize;
      getCustomerList();
    };

    const closeModal = () => {
      context.emit("close")
    }

    const commitSelect = () => {
      if (!state.selectCustomer) {
        message.error("请选择意向客户")
        return
      }
      context.emit("select", state.selectCustomer)
    }

    const columns = [
      {
        title: "客户名称",
        key: "name",
        dataIndex: "name"
      },
      {
        title: "客户号码",
        key: "tel",
        dataIndex: "tel"
      },
      {
        title: "客户公司",
        key: "company",
        dataIndex: "company"
      },
      {
        title: "所属行业",
        key: "industry_name",
        dataIndex: "industry_name"
      }, {
        title: "客户状态",
        key: "status_txt",
        dataIndex: "status_txt"
      },
      {
        title: "意向项目",
        key: "village_name",
        dataIndex: "village_name"
      }
    ]
    return {
      ...toRefs(state),
      pagination,
      columns,
      closeModal,
      toSearch,
      reset,
      modelRef,
      customRow,
      commitSelect,
      handleTableChange,
      setRowClassName,

    }
  }
}
</script>


<style lang="less" scoped>
:deep(.ant-table-cell-row-hover) {
  background-color: #E0F1FB !important;
}

:deep(.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td) {
  border-width: 0;
}

:deep(.bg-select) {
  background: #E0F1FB;
}

:deep(.bg-select td) {
  background-color: #E0F1FB !important;
}


</style>